<template>
    <div  class="indextemplate">
        <div class="indexdivtitle">二维码解析</div>
        <div class="qrdiv">
            <input @change="img($event)" type="file" name="img-up" id="img-up" class="mara"/>
            <img id="qrimg" :src="src" alt="二维码" class="mara"/>
            <textarea style="padding:0;" v-model="initQCode"/>
        </div>
    </div>
    <div  class="indextemplate">
        <div class="indexdivtitle">二维码生成</div>
        <div class="qrdiv">
            <textarea style="padding:0;" v-model="qrtext"/>
            <vue-qrcode :value="qrtext" :options="{ width: 400 }" class="mara"></vue-qrcode> 
        </div>
    </div>
</template>

<script>
    import {ref, reactive } from "vue"
    export default {
      name: 'QrReadBuild',
      component: {
        },
        setup(){
            let initQCode = ref('')
            let src = ref('')
            let qrtext = ref('https://ssdcc.online/#/index')
            let qrsize = ref(100)
            return{
                initQCode,
                src,
                qrtext,
                qrsize
            }
        },
        mounted(){
            
        },
      methods: {
        show() {
        },
        img(e) {
            let that = this;//改变this指向
            let files = e.target.files[0];//图片文件名
            if (!e || !window.FileReader) return; // 看是否支持FileReader
            let reader = new FileReader();
            reader.readAsDataURL(files); // 关键一步，在这里转换的
            reader.onloadend = function () {
                that.src = this.result;//赋值
                //解析二维码图片
                that.qrcodeParser(files).then(res =>{
                    console.log(res);
                    that.initQCode = res;
                }).catch((err) => {
                console.log('error', err)
                    that.initQCode = "图片中未解析到数据";
                })
            }
        },
      }
    }
</script>
<style>
.qrdiv{
    display: flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content: center;
}
.qrcode {
  display: inline-block;
  width: 132px;
  height: 132px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
.mara{
    margin-left: auto;
    margin-right: auto;
}
#qrimg{
    max-width: 100%;
}
</style>